<template>
  <div>
 <!-- <van-nav-bar
 class="dingbu"
  title="我的优惠券"
  left-arrow
  @click-left="$router.back()"
/> -->
<my-header title="我的优惠券" @onClickLeft="$router.push('/my')"/>
<van-grid direction="horizontal" :column-num="2">
  <van-grid-item  text="通用优惠券"  @click="qiehuan1()" />
  <van-grid-item  text="店铺优惠券" @click="qiehuan2()" />
</van-grid>
  <!-- 通用优惠券 -->
<div v-if="swting">
<van-row>
  <van-col span="4"><p class="shuju"><span>￥</span>6</p></van-col>
  <van-col offset="1">
      <p>通用优惠券</p>
      <p>有效时间:2020-02-18 17:11:00-2020-03-18 17:11:00</p>
      <button>使用</button>
      </van-col>
</van-row>
</div>
<!-- 店铺优惠券 -->
<div v-else>
<van-row>
  <van-col span="4"><p class="shuju"><span>￥</span>6</p></van-col>
  <van-col offset="1">
      <p>店铺优惠券(新家宜)</p>
      <p>有效时间:2020-02-18 17:11:00-2020-03-18 17:11:00</p>
      <button>使用</button>
      </van-col>
</van-row>
<van-row>
  <van-col span="4"><p class="shuju"><span>￥</span>6</p></van-col>
  <van-col offset="1">
      <p>通用优惠券(新家宜)</p>
      <p>有效时间:2020-02-18 17:11:00-2020-03-18 17:11:00</p>
      <button>使用</button>
      </van-col>
</van-row>
</div>
  </div>
</template>

<script>
import MyHeader from '../components/my-header.vue'
export default {
  name: '',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      swting: true
    }
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {
    qiehuan1 () {
      this.swting = true
    },
    qiehuan2 () {
      this.swting = false
    }
  }
}
</script>

<style scoped lang="less">
 .dingbu{
    // border-bottom: 4px solid #555;
    /deep/ .van-icon-arrow-left::before {
    font-size: 40px;
    font-weight: 700;
    color: #333 ;
  }
}
 /deep/ .van-grid-item__content{
    border: 2px solid #333 !important;
}
.van-col--offset-1{
    font-size: 12px;
    button{
        padding: 10px 60px;
        border-radius: 50px;
        background:#fff;
        border: 1px solid #000;
        float: right;
    }
}
.shuju{
    margin-left: 20px;
    font-weight: 700;
    color: red;
    span{
        font-size: 30px;
    }
}
.van-row{
    padding: 20px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #222;
    margin-bottom: 10px;
}
</style>
